import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import { MoveInRight } from 'bee-mobile/lib/Transitions'
import { routes, basename, switchPages as switchBarConf } from './router'
import { useQuery } from '@/hooks'
import './App.scss'

import SwitchBar from './components/switchBar'

function RouteMap (route) {
	const query = useQuery()
	return (
		<Route
			path={route.path}
			render={props => (
				<>
					{route.isSwitch ?
						<route.component {...props} query={query} meta={route.meta} routes={route.routes} />
						:
						<MoveInRight in={true}>
							<route.component {...props} query={query} meta={route.meta} routes={route.routes} />
						</MoveInRight>
					}
				</>
			)}
		/>
	)
}

function App () {
	return (
		<div className="App">
			<Router basename={basename}>
				<Switch>
					{
						routes.map((route, i) => (
							<RouteMap key={i} {...route} />
						))
					}
				</Switch>
				{!!switchBarConf.length && <SwitchBar list = {switchBarConf} />}
			</Router>
		</div>
	)
}

export default App
